<%--
  Created by IntelliJ IDEA.
  User: 企鹅劳劳
  Date: 2023/6/4
  Time: 21:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UserDetail</title>
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            width: 100%;
        }

        body {
            width: 100%;
            /*height: 100%;*/
            cursor: default;
            display: flex;
            flex-direction: column;
            background-color: antiquewhite;
        }

        header {
            position: relative;
            width: 100%;
            height: 100px;
            min-height: 100px;
            background-color: black;
        }

        .title {
            /* padding: auto; */
            position: absolute;
            color: white;
            font-size: 50px;
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
            line-height: 90px;
            left: 33px;
        }

        .tables {
            position: absolute;
            width: 60%;
            height: 100%;
            right: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .table {
            width: 20%;
            height: 100%;
            color: white;
            background-color: black;
            font-size: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: default;
        }

        .table:hover {
            background-color: rgb(107, 105, 105);
        }

        .user {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 200px;
            height: 100px;
            right: 0;
            color: white;
        }

        .user img {
            width: 80px;
            height: auto;
            border-radius: 50%;
        }

        .container {
            width: 100%;
            height: 800px;
            overflow: scroll;
            padding-bottom: 50px;
            background-color: antiquewhite;
            padding-top: 50px;
            padding-bottom: 50px;
            border: 1px solid white;

            display: flex;
            align-items: center;
            flex-direction: column;
            overflow-y: auto;
        }

        .aBook {
            width: 90%;
            height: 300px;
            background-color: burlywood;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 25px;
            margin: 10px;
        }

        .bookImg {
            width: 200px;
            height: 250px;
            background-color: rgba(128, 128, 128, 0.313);
            border-radius: 30px;
        }

        .bookIntroduce {
            width: 70%;
            height: 250px;
            background-color: white;
            font-size: xx-large;
            font-family: 'Times New Roman', Times, serif;
        }

        .bookName {
            width: 100%;
            height: 50%;
            padding: 10px;
            box-sizing: border-box;
            font-style: italic;
        }

        .comment {
            width: 100%;
            height: 50%;
            padding: 10px;
            box-sizing: border-box;
        }

        .custom-table {
            width: 100%;
            table-layout: fixed;
        }

        .custom-table td {
            width: 100%; /* 设置每列宽度为表格宽度的一半 */
            padding: 8px;
            border: 1px solid #ddd;
        }

        .top {
            width: 100%;
            height: 100px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .listname {
            width: 500px;
            height: 50px;
            font-size: 20px;
            font-style: italic;
            font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: skyblue;
        }

        .addBook {
            width: 100px;
            height: 50px;
            border-radius: 20px;
            background-color: gray;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .bottom {
            background-color: #4A6782;
            height: 300px;
            width: 100%;
            font-size: xx-large;
            font-family:'Times New Roman', Times, serif;
            font-style: italic;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>
<header>
    <div class="title">
        BookCLUB
    </div>
    <div class="tables">
        <div class="table" onclick="toHome()">
            <div>首页</div>
        </div>
        <div class="table" onclick="toBook()">
            <div>阅读</div>
        </div>
        <div class="table" onclick="toBook()">
            <div>讨论</div>
        </div>
        <div class="user" onclick="toUser()">
            <img src="img/nullhead.png">
            <div style="margin: 10px;" id="getName"><%=session.getAttribute("user")%>
            </div>
        </div>
    </div>
</header>
<div class="top">
    <div class="listname">快选择一本书进行畅快的讨论吧！</div>
    <div class="addBook" onclick="addBook()">开启新的书</div>
    <div style="display: none" id="insertBook"><%=request.getAttribute("insertBook")%></div>
</div>
<div class="container">
    <%--    <table class="custom-table">--%>
    <%--        <tbody>--%>
    <c:forEach var="BOOK" items='<%=request.getAttribute("books")%>' begin="0">
        <%--        ${color}&nbsp;--%>
        <%--            <div>若是键值对${BOOK.key}还有值${BOOK.value}</div>--%>
        <div class="aBook">
            <div class="bookImg">
            </div>
            <div class="bookIntroduce">
                <div class="bookName">
                        ${BOOK.key}
                </div>
                <div class="comment">
                    热度：${BOOK.value}
                </div>
            </div>
            <form style="display: none;" id="forms" action="/getBook" method="post">
                <input name="bookName" value=${BOOK.key}>
            </form>
        </div>
    </c:forEach>
    <%--        </tbody>--%>
    <%--    </table>--%>
</div>
<div class="bottom">
    读书时,我愿在每一个美好思想的面前停留,就像在每一条真理面前停留一样
</div>
<%--<form style="display: none" method="post" action="/BookList" id="BookList"></form>--%>
</body>

</html>
<script>
    window.onload = function () {
        var t = document.getElementById('getName').innerText;
        if (t.length > 10) {
            t = t.substring(0, 9) + "...";
            document.getElementById('getName').innerText = t;
        }
        var a=document.getElementById('insertBook');
        if(a.innerText=='新增成功'){
            alert("新增成功")
        }
    }
    allclick = function () {
        alert("暂不提供此功能");
    }
    toHome = function () {
        window.location.href = 'Homepage.jsp';
    }
    toUser = function () {
        window.location.href = 'UserDetail.jsp';
    }
    toBook = function () {
        var b = document.getElementById('BookList');
        b.submit();
    }
    addBook=function (){
        window.location.href='insertBook.jsp';
    }

    var container = document.getElementsByClassName('container');
    container[0].onclick = function (e) {
        let event = e || window.event;
        var tar = event.target;
        var tarClassName = tar.classList[0];
        if (tarClassName == 'aBook') {
            console.log(tar.childNodes[5].childNodes[1].value)//通过各类子节点，拿到form，拿到input再拿到value
            tar.childNodes[5].submit();
        } else if (tarClassName == 'container') {
            console.log('这是一个大父亲结点');
        } else if (tarClassName == 'comment' || tarClassName == 'bookName') {
            console.log(tar.parentNode.parentNode.childNodes[5].childNodes[1].value);
            tar.parentNode.parentNode.childNodes[5].submit();
        } else {
            console.log(tar.parentNode.childNodes[5].childNodes[1].value)
            tar.parentNode.childNodes[5].submit();
        }
    }
</script>


